import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sleep_manager/ui/widget/custom_app_bar.dart';

/// 监测页面
class MonitorPage extends StatefulWidget {
  const MonitorPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MonitorPageState();
  }

}

class _MonitorPageState extends State<MonitorPage> {
  @override
  Widget build(BuildContext context) {

    var titles = [
      '脑电1',
      '脑电2',
      '左眼动',
      '右眼动',
      '颊肌',
      '气流',
      '鼾声',
      '脉搏',
      'SpO2',
      '体位'
    ];

    List<FlSpot> data = [
      FlSpot(0, 0), // x=0, y=10
      FlSpot(0, 0), // x=10, y=30
      FlSpot(0, 0), // x=20, y=20
      FlSpot(0, 0), // x=30, y=60
      FlSpot(0, 0), // x=40, y=40
      // ... 更多点
    ];

    LineChartBarData lineData = LineChartBarData(
      spots: data,
      color: Colors.red, // 曲线颜色
      dotData: const FlDotData(show: false),
    );

    // 返回表格左侧的标题
    List<Widget> chartLeftTitle() {
      List<Widget> widgets = [];

      for (int i = 0; i < titles.length; i++) {
        BorderRadius borderRadius;
        if (i == 0) {
          borderRadius = const BorderRadius.only(topLeft: Radius.circular(12));
        } else if (i == titles.length - 1) {
          borderRadius =
              const BorderRadius.only(bottomLeft: Radius.circular(12));
        } else {
          borderRadius = BorderRadius.zero;
        }

        widgets.add(Expanded(
          flex: 1,
          child: Container(
            width: 52,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                borderRadius: borderRadius,
                gradient: const LinearGradient(
                    colors: [Color(0xFF80BFFF), Color(0xFF397AFB)],
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter)),
            child: Text(
              titles[i],
              style: const TextStyle(color: Colors.white, fontSize: 12),
            ),
          ),
        ));
      }

      return widgets;
    }

    LineChartData lineChartData() {
      return LineChartData(
          lineBarsData: [lineData],
          gridData: FlGridData(
            show: true,
            drawHorizontalLine: true,
            drawVerticalLine: true,
            horizontalInterval: 10,
            verticalInterval: 25,
            getDrawingHorizontalLine: (_) => const FlLine(
              color: Color(0xFF707070),
              strokeWidth: 1,
            ),
            getDrawingVerticalLine: (_) => const FlLine(
              color: Color(0xFF707070),
              strokeWidth: 1,
            ),
          ),
          borderData: FlBorderData(show: false),
          titlesData: const FlTitlesData(
              show: true,
              topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
              rightTitles:
                  AxisTitles(sideTitles: SideTitles(showTitles: false)),
              leftTitles: AxisTitles(
                  sideTitles: SideTitles(showTitles: false, interval: 10)),
              bottomTitles: AxisTitles(
                  sideTitles: SideTitles(showTitles: false, interval: 10))),
          minX: 0,
          maxX: 250,
          minY: 0,
          maxY: 100);
    }

    return Scaffold(
      appBar: const CustomAppBar(
        title: '监测',
      ),
      body: Container(
        color: const Color(0xFFF7F7F7),
        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
        child: Container(
          padding: const EdgeInsets.fromLTRB(16, 10, 16, 26),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 8,
                    spreadRadius: 2,
                    offset: const Offset(4, 4))
              ]),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                children: [
                  Expanded(flex: 1, child: Container()),
                  const Text(
                    "王多鱼",
                    style: TextStyle(fontSize: 12),
                  ),
                  const Icon(
                    Icons.arrow_drop_down_rounded,
                    size: 30,
                  )
                ],
              ),
              SvgPicture.asset(
                width: 25,
                height: 25,
                'assets/images/monitor_device.svg',
              ),
              const SizedBox(height: 5),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    "NCC_PSG_21A6.D785.967C ACD3",
                    style: TextStyle(fontSize: 12),
                  ),
                  const Text(
                    "已连接",
                    style: TextStyle(fontSize: 12, color: Color(0xFF397AFB)),
                  ),
                  SvgPicture.asset('assets/images/battery_1.svg')
                ],
              ),
              Expanded(
                  flex: 1,
                  child: Container(
                    margin: const EdgeInsets.fromLTRB(0, 20, 0, 11),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black.withOpacity(0.1),
                              blurRadius: 8)
                        ],
                        borderRadius: BorderRadius.circular(12)),
                    child: Row(
                      children: [
                        Column(
                          children: chartLeftTitle(),
                        ),
                        Expanded(
                          flex: 1,
                          child: LineChart(
                            lineChartData(),
                          ),
                        )
                      ],
                    ),
                  )),
              Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(bottom: 10),
                child: const Text(
                  "00:00:00",
                  style: TextStyle(fontSize: 31, color: Color(0xFF0454F2)),
                ),
              ),
              Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.symmetric(vertical: 12),
                decoration: BoxDecoration(
                    gradient: const LinearGradient(
                        colors: [Color(0xFF80BFFF), Color(0xFF397AFB)],
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight),
                    borderRadius: BorderRadius.circular(24)),
                child: const Text(
                  "开始监测",
                  style: TextStyle(fontSize: 18, color: Colors.white),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
